<template>
	<view class="identify">
		<Hearder :name="'实名认证'"></Hearder>
		<image src="/static/images/995.png" mode="widthFix"></image>
		<view class="content">
			<view class="first-name">
				<view>未实名认证</view>
				<view>提升账号安全，保障合法权益</view>
			</view>
			<view class="tow-box">
				<view class="tow-name">使用有效身份证信息认证</view>
				<view class="list-con">
					<view class="every">
						<view class="lable">姓名</view>
						<view class="shuru">
							<input placeholder="请输入真实姓名" placeholder-style="color:#808080;" v-model="id_name"/>
						</view>
					</view>
					<view class="every">
						<view class="lable">证件类型</view>
						<view class="shuru">
							<input value="居民身份证" disabled/>
						</view>
					</view>
					<view class="every">
						<view class="lable">证件号码</view>
						<view class="shuru">
							<input placeholder="请输入身份证号" placeholder-style="color:#808080;"v-model="id_card"/>
						</view>
					</view>
				</view>
				<view class="ljrenz" @click="Certification">立即认证</view>
			</view>
			<view class="tips-con">为满足相关法律法规政策及相关主管都门的要求，我们需要收集您的姓名．身份证件号码、有关身份证明材料</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				id_name:'',
				id_card:''
			}
		},
		methods:{
			// 立即认证
			Certification(){
				this.request('/Certification',{id_card:this.id_card,id_name:this.id_name}).then(res=>{
					if(res.data.code == 1){
						this.$tip(res.data.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}else{
						this.$tip(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.identify{
		position: relative;
		min-height: 100%;
		background: #6C99F0;
		>image{
			width: 100%;
		}
		.content{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			/* #ifdef H5 */
			top: 88rpx;
			height: calc(100% - 88rpx);
			/* #endif */
			padding: 0 55rpx;
			box-sizing: border-box;
			.first-name{
				view{
					font-size: 26rpx;
					color: #fff;
					&:first-of-type{
						font-size: 46rpx;
						font-weight: 800;
						margin: 68rpx 0 30rpx;
					}
				}
			}
			.tow-box{
				overflow: hidden;
				background: #fff;
				border-radius: 20rpx;
				margin-top: 52rpx;
				.tow-name{
					height: 90rpx;
					background: #EFF4FD;
					text-align: center;
					line-height: 90rpx;
				}
				.list-con{
					.every{
						display: flex;
						align-items: center;
						height: 104rpx;
						border-bottom: 1rpx solid #eee;
						padding: 0 20rpx;
						.lable{
							width: 26%;
							font-size: 28rpx;
							color: #808080;
						}
						.shuru{
							width: 74%;
							input{
								width: 100%;
								font-size: 28rpx;
							}
						}
					}
				}
				.ljrenz{
					width: 580rpx;
					height: 88rpx;
					background: $uni-item-color;
					font-size: 32rpx;
					color: #fff;
					text-align: center;
					line-height: 88rpx;
					border-radius: 88rpx;
					margin: 48rpx auto 42rpx;
				}
			}
			.tips-con{
				background: rgba(255,255,255,.2);
				font-size: 24rpx;
				color: #fff;
				padding: 30rpx;
				line-height: 36rpx;
				border-radius: 20rpx;
				margin-top: 30rpx;
			}
		}
	}
</style>